<template>
  <div>
    <!-- 确保ID与你的图表对应 -->
    <div id="echartsyou1" class="charts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 确保已经安装了echarts并正确导入

export default {
  data() {
    return {
      timer: null,
    };
  },
  mounted() {
    this.initEcharts();
    var numss = 1;
    this.timer = setInterval(() => {
      if (this.timer) {
        if (numss - 1 == 0) {
          this.initEcharts();
          numss = numss + 1;
        } else if (numss - 2 == 0) {
          this.initEcharts1();
          numss = numss + 1;
        } else if (numss - 3 == 0) {
          this.initEcharts2();
          numss = numss + 1;
        } else {
          this.initEcharts3();
          numss = numss - 3;
        }
      }
    }, 1500);
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.getElementById("echartsyou1"));

      // 基于准备好的dom，初始化echarts实例

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>  {c} ({d}%)",
        },

        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        series: [
          {
            name: "排名",
            type: "pie",
            color: ["#33b565", "#20cc98", "#20b9cf", "#2089cf", "#205bcf"],
            radius: [20, 70],
            center: ["50%", "50%"],
            roseType: "area",
            data: [
              { value: 700, name: "武汉" },
              { value: 900, name: "广州" },
              { value: 1100, name: "天津" },
              { value: 1500, name: "江西" },
              { value: 400, name: "厦门" },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts1() {
      const myChart = echarts.init(document.getElementById("echartsyou1"));

      // 基于准备好的dom，初始化echarts实例

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>  {c} ({d}%)",
        },

        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        series: [
          {
            name: "排名",
            type: "pie",
            color: ["#33b565", "#20cc98", "#20b9cf", "#2089cf", "#205bcf"],
            radius: [20, 70],
            center: ["50%", "50%"],
            roseType: "area",
            data: [
              { value: 1500, name: "武汉" },
              { value: 400, name: "广州" },
              { value: 600, name: "天津" },
              { value: 1200, name: "江西" },
              { value: 1400, name: "厦门" },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts2() {
      const myChart = echarts.init(document.getElementById("echartsyou1"));

      // 基于准备好的dom，初始化echarts实例

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>  {c} ({d}%)",
        },

        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        series: [
          {
            name: "排名",
            type: "pie",
            color: ["#33b565", "#20cc98", "#20b9cf", "#2089cf", "#205bcf"],
            radius: [20, 70],
            center: ["50%", "50%"],
            roseType: "area",
            data: [
              { value: 300, name: "武汉" },
              { value: 600, name: "广州" },
              { value: 1400, name: "天津" },
              { value: 800, name: "江西" },
              { value: 900, name: "厦门" },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts3() {
      const myChart = echarts.init(document.getElementById("echartsyou1"));

      // 基于准备好的dom，初始化echarts实例

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>  {c} ({d}%)",
        },

        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        series: [
          {
            name: "排名",
            type: "pie",
            color: ["#33b565", "#20cc98", "#20b9cf", "#2089cf", "#205bcf"],
            radius: [20, 70],
            center: ["50%", "50%"],
            roseType: "area",
            data: [
              { value: 900, name: "武汉" },
              { value: 1300, name: "广州" },
              { value: 800, name: "天津" },
              { value: 1600, name: "江西" },
              { value: 500, name: "厦门" },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    handleWindowResize() {
      this.$nextTick(() => {
        this.myCharts.forEach((chart) => chart.resize());
      });
    },
  },
  data() {
    return {
      myCharts: [], // 用于存储所有echarts实例，以便在窗口调整大小时重新调整图表
    };
  },
};
</script>
